<script setup>
	import {
		ref,
		onMounted,
	} from 'vue';
	import {
		redirectToToHome,
	} from "@/assets/scripts/navigate.js"
	import {
		persionTypeApi,
		meMemorialApi,
	} from '@/assets/api/tarbar/people.js';
	import {
		h5TitleRight
	} from '@/config/index.js';

	// 组件
	import bottomTabBar from '@/components/bottomTabBar.vue'
	import peopleSacrificeCard from '@/components/peopleSacrificeCard.vue'

	const keyword = ref('')
	const btnCurrent = ref('全部')
	const btnList = ref([])
	const pageNum = ref(1)
	const total = ref(10)
	const loading = ref(true)
	const peopleSacrificeList = ref([])

	const handleMore = () => {
		if (loading.value) return
		loading.value = true
		pageNum.value = pageNum.value + 1
		peopleSacrificeList_init()
	}

	const handleSearch = () => {
		pageNum.value = 1
		peopleSacrificeList_init()
	}

	const btnList_handleClick = (value) => {
		btnCurrent.value = value
		pageNum.value = 1
		peopleSacrificeList_init()
	}

	onMounted(() => {
		btnList_init()
		peopleSacrificeList_init()
	})

	const btnList_init = async () => {
		const res = await persionTypeApi()
		if (res.code === 200) {
			btnList.value = [{
				dictLabel: '全部',
				dictValue: '全部',
			}].concat(res.data)
		}
	}

	const peopleSacrificeList_init = async () => {
		const meTtype = btnCurrent.value === '全部' ? '' : btnCurrent.value
		const res = await meMemorialApi(meTtype, keyword.value, pageNum.value)
		if (res.code === 200) {
			total.value = res.total
			const rows = res.total <= (pageNum.value - 1) * 10 ? [] : res.rows
			peopleSacrificeList.value = [...peopleSacrificeList.value.slice(0, (pageNum.value - 1) * 10), ...rows]
			loading.value = false
		}
	}
</script>

<template>
	<view class="bg-grey-fill">

		<uv-navbar :fixed="false" bgColor="#fff" :title="h5TitleRight">
			<template v-slot:left>
				<view class="d-flex d-flex-aic" @click="redirectToToHome">
					<uv-icon name="arrow-left" size="19"></uv-icon>
					返回首页
				</view>
			</template>
		</uv-navbar>

		<view class="p-normal pt-small pb-small bg-white">
			<view class="py-small d-flex">
				<uv-input class="d-flex-fx1 mr-normal" :prefixIconStyle="{'font-size': '24px', color:'#999999'}"
					:customStyle="{background:'#f2f2f2', 'border-radius': '17px', height:'20px', 'border': '0px'}"
					prefixIcon='search' placeholder="请输入纪念馆或者逝者名称" v-model="keyword">
				</uv-input>
				<uv-button type="success" text="搜索" shape='circle' :customStyle="{height:'32px'}"
					@click="handleSearch"></uv-button>
			</view>
		</view>

		<view class="p-normal pt-small pb-small">
			<scroll-view :show-scrollbar="false" class="pt-small pb-small scroll-view" scroll-x="true">
				<uv-button :type="item.dictValue == btnCurrent ? 'success':'info'" :text="item.dictLabel"
					v-for="(item, index) in btnList" :key="index" :customStyle="{height:'32px', display:'inline-block'}"
					@click="btnList_handleClick(item.dictValue)"></uv-button>
			</scroll-view>
		</view>

		<view class="px-normal">
			<uv-empty class="py-normal" mode="list" icon="empty-favor" style="background-color: #fff"
				v-if="!peopleSacrificeList.length"></uv-empty>
			<uv-row class="mb-normal" v-for="(item, index) in peopleSacrificeList" :key="index">
				<uv-col>
					<peopleSacrificeCard :data="item"></peopleSacrificeCard>
				</uv-col>
			</uv-row>
			<!-- <view>loading{{loading}}</view>
			<view>total{{total}}</view>
			<view>pageNum{{pageNum}}</view>
			<view>res{{!loading && total > pageNum * 10}}</view> -->
			<uv-button class="mb-normal" style="width: 100%;" v-if="!loading && total > pageNum * 10" type="success"
				text="查看更多" @click="handleMore"></uv-button>
		</view>
	</view>
	<bottomTabBar></bottomTabBar>
</template>

<style lang="scss" scoped>
	.scroll-view {
		white-space: nowrap;
	}

	.uv-button-wrapper {
		display: inline-block;
		line-height: 32px;
		margin-right: 5px;

		::v-deep .uv-button {
			border-width: 0 !important;
			padding: 0 18px;
		}

		&:last-of-type {
			margin-right: 0;
		}
	}
</style>